/*
 * @Description: 首页页面
 * @Author: buwei.huang
 * @Date: 2019-06-21 11:30:09
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-07-02 14:06:29
 */
<template>
  <scroll
    ref="scroll"
    :useBody="useBody"
    :getListData="getListDataByScroll"
    :up="up"
    :useNative="useNative"
    class="home"
  >
    <!-- 头部标题栏 -->
    <title-bar />
    <div>
      <!-- 选项 -->
      <tab-option />
      <!-- 公告 -->
      <bus-notice class="home_bgColor home_mar" />
      <!-- 站点列表 -->
      <nearby-site-list class="home_bgColor home_mar" />
      <!-- 广告位 -->
      <banner
        :bannerEnName="APP_HOME_MIDDLE_BANNER"
        height="2.4rem"
        class="home_mar"
        v-if="isAdvertising"
      />
      <!-- 文章列表 -->
      <article-list
        :articleList="articleList"
        class="home_bgColor home_mar"
        v-if="isArticle"
      />
    </div>
  </scroll>
</template>
<script>
import BusNotice from '@/components/busnotice/BusNotice'
import NearbySiteList from '@/components/nearbysite/NearbySiteList'
import Titlebar from '../components/Titlebar'
import TabOption from '../components/TabOption'
import ArticleList from '../components/ArticleList'
import { Banner, XBScroll } from 'vue-xb-ui-depot'
import { getArticleList } from '../api/api.js'
export default {
  components: {
    'bus-notice': BusNotice,
    'nearby-site-list': NearbySiteList,
    'title-bar': Titlebar,
    'tab-option': TabOption,
    'banner': Banner,
    'article-list': ArticleList,
    'scroll': XBScroll
  },
  data() {
    return {
      APP_HOME_MIDDLE_BANNER: window.APP_HOME_MIDDLE_BANNER, // 广告位
      isArticle: window.isArticle, // 是否显示文章列表
      isAdvertising: window.isAdvertising, // 是否展示广告位
      useNative: window.prodInApp, // 是否是移动端
      articleList: [], // 文章数据列表
      // 是否使用body作为滑动容器
      useBody: true,
      up: {
        noMoreSize: 6,
        page: { size: 5 }
      }
    }
  },
  methods: {
    getListDataByScroll(pageIndex, pageSize) {
      this.$EventBus.$emit('onRefresh')
      return this.isArticle ? getArticleList(pageIndex, pageSize).then(res => {
        this.articleList = pageIndex !== 1 ? this.articleList.concat(res.articleList) : res.articleList
        if (res.count > 0) {
          this.isArticle = true
          return { length: pageSize, count: res.count }
        } else {
          this.isArticle = false
          return { length: pageSize, count: 1 }
        }
      }) : new Promise((resolve, reject) => {
        resolve({ length: pageSize, count: 1 })
      })
    }
  }
}
</script>
<style>
.home_bgColor {
  background-color: #fff;
}
.home_mar {
  margin-top: 16px;
}
</style>
